<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<!--
			Step #5
				- 4단계를 JSTweener를 이용해 변경해보기(2시간)
				
			Step #4-1
				- 리팩토링 - 커다란 함수를 여러 개의 조각으로 나누기
				
	        Step #4
	        	- 단계2, 3단계를 합해서 두 개를 동시에 움직이기(10분)
	                
			Step #3
				- 배너 하나를 아래에서 출력 영역으로 움직여보기(10분)
			            
			Step #2
				- 배너 하나를 위쪽으로 움직여보기(10분)
		
			Step #1
				- 배너 구조 잡기(1시간)
		
	-->
	<style>
		#banner_container{
			position:relative;
			width:128px;
			
			height:128px;
			border:1px solid #cccccc;
			top:100px;
			left:100px;
			overflow:hidden;;
			
		}
		
		#banner_container div{
			position:absolute;
			width:128px;
			height:128px;
			
			top:0;
			background:#ffffff;
		}
		
		
	</style>
	
	<script src="JSTweener.js" type="text/javascript"></script>
	<script>   
	
		var bannerContainer;
		var currentBanner;
		var nextBanner;
		window.onload = function(){
			// 요소 초기화.	
			init();
			// 배너 위치 설정하기.
			setBannerPosition();
			// 배너 움직이기.
			startMove();
		}
		
		
		// 요소 초기화.	
		function init(){
			// bannerContainer 찾기.
			this.bannerContainer = document.getElementById("banner_container");
			
			// banner중 0번째 배너를  구한다. (현재 배너)
			this.currentBanner = this.bannerContainer.getElementsByTagName("div")[0];
			// banner중 1번째 배너를  구한다. (다음 배너)
			this.nextBanner = this.bannerContainer.getElementsByTagName("div")[1];
		
		}
		
		
		// 배너 위치 설정하기.
		function setBannerPosition(){	
			this.currentBanner.style.top = "0px";
			this.nextBanner.style.top = "128px";	
		}
		
		
		// 배너 움직이기.
		function startMove(){			
			// 현재배너를 위쪽으로 움직이기.			
			JSTweener.addTween(this.currentBanner.style, {
				time: 0.5,
				transition: 'easeInQuad',
				top:-128
			});
			
			// 다음배너를 출력화면영역으로 움직이기.		
			JSTweener.addTween(this.nextBanner.style, {
				time: 0.5,
				transition: 'easeInQuad',
				top:0
			});			
		}			
	</script>

</head>

<body>
	<div id="banner_container" >
		<div>
			<img src="images/img1.jpg">
		</div>
		<div>
			<img src="images/img2.jpg">
		</div>
	</div>    
</body>
</html>



